<template>
	<view class="Box">
	    <view class="chatBox" :class="{goRight:id!==user.id}">
	    <view>
	      <image class="image" :src="Useravatar" alt v-if="type==='chat'" />
	    </view>
	    <view>
	      <p class="realname">{{realname}}</p>
	      <view class="message1" v-if="type==='chat'">
	        {{text}}
	        <view :class="[{Lborder:id===user.id},{Rborder:id!==user.id}]"></view>
	      </view>
	      <view class="tip">
					<view v-if="type==='notice'">{{text}}</view>
				</view>
	    </view>
	  </view>
	  </view>
</template>

<script>
	export default{
		props: ["text", "type", "username", "realname", "id" ,"avatar"],
		  data() {
		    return {
					user:{}
		    };
		  },
		  mounted() {
      		this.user = uni.getStorageSync("usernameInfo")?uni.getStorageSync("usernameInfo"):{}
		 },
		  computed: {
				
		    Useravatar() {
		      return this.user.id===this.id?this.user.avatar:this.avatar
		    },
		  },
	}
</script>

<style lang="scss" scoped>
	.Box{
		position: relative;
	  overflow: hidden;
	}
	.goRight {
	  float: right;
	  margin-right: 50px;
		.image{
			position: absolute;
			right: 0;
			float: right;
		}
	}
	.realname {
	  margin-left: 20px;
	}
	.chatBox {
	  display: flex;
	}
	.image {
	  width: 50px;
	  height: 50px;
	  border-radius: 50px;
	}
	.tip {
	  display: block;
	  font-size: 15px;
	  color: #666666;
	  text-align: center;
	  margin: 5px 15px;
	}
	.message1 {
	  max-width: 150px;
	  display: inline-block;
	  margin: 5px 15px;
	  background-color: rgb(0, 0, 0);
	  border-bottom-color: rgb(0, 0, 0);
	  /*为了给after伪元素自动继承*/
	  color: #fff;
	  font-size: 15px;
	  line-height: 18px;
	  padding: 5px 12px 5px 12px;
	  box-sizing: border-box;
	  border-radius: 6px;
	  position: relative;
	  word-break: break-all;
	}
	
	.Rborder {
	  position: absolute;
	  top: -5px;
	  right: -7px;
	  width: 10px;
	  height: 10px;
	  border-width: 0 0 10px 10px;
	  border-style: solid;
	  border-bottom-color: inherit;
	  /*自动继承父元素的border-bottom-color*/
	  border-left-color: transparent;
	  border-radius: 0 0 60px 0;
	  margin-left: 17px;
	}
	.Lborder {
	  position: absolute;
	  top: -5px;
	  left: -9px;
	  width: 10px;
	  // background-color: green;
	  height: 10px;
	  border-width: 0px 10px 10px 0;
	  border-style: solid;
	  border-bottom-color: inherit;
	  /*自动继承父元素的border-bottom-color*/
	  border-right-color: transparent;
	  border-radius: 0 0px 0px 60px;
	}
</style>
